<template>
  <div style="width: 100%;overflow: hidden;">
    <van-popup
      v-model="show"
      position="left"
      class="fa"
      :style="{ height: '100%', width: '100%' }"
    >
      <div style="position: fixed;top: 0;left: 0;width: 100%;z-index: 999;">
        <van-nav-bar
          title="样品"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
        <div class="client">
          <van-field
            label="客户名称："
            @click="CustomerChoice"
            right-icon="edit"
            placeholder="请选择客户"
            v-model="entity.CustomerName"
            readonly
          >
          </van-field>
          <van-field
            readonly
            @click="readonly ? (showDate = false) : (showDate = true)"
            label="申请日期："
            placeholder="请选择日期"
            :value="entity.ApplyDate"
          />

          <van-field
            readonly
            @click="showPickerClick"
            label="收件人"
            placeholder="收件人"
            v-model="entity.Addressee"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              value-key="Addressee"
              :columns="columns"
              @confirm="onConfirmAddressee"
              @cancel="showPicker = false"
            />
          </van-popup>
          <van-field
            readonly
            label="收件电话"
            placeholder="收件电话"
            v-model="entity.AddresseeTel"
          />
          <van-field
            :readonly="readonly"
            label="收货地址"
            placeholder="收货地址"
            v-model="entity.ReceiveAddress"
          />
        </div>
      </div>

      <div class="scrollBar">
        <div class="mysamplebox" v-for="(item, index) in data" :key="item.Id">
          <div class="left">
            品名:<span class="font"
              >{{ item.ProductId }}/{{ item.cInvName }}</span
            >
          </div>

          <!-- <van-divider /> -->
          <div class="left">
            规格:<span class="font">{{ item.cInvStd || "无" }}</span>
          </div>

          <span class="Fa">
            <span class="left">数量:</span>
            <van-stepper
              :disabled="readonly"
              class="fontstepper"
              input-width="50px"
              v-model="item.MainQuantity"
            />
          </span>
          <van-field
            :readonly="readonly"
            label="备注:"
            rows="2"
            autosize
            type="textarea"
            v-model="item.Remark"
            placeholder="备注"
          />
          <van-button
            v-if="!readonly"
            @click="delte([item.Id], index)"
            style="margin-left: 8px;margin-bottom: 8px"
            slot="button"
            type="danger"
            >删除</van-button
          >
        </div>
      </div>

      <div
        :style="{
          position: 'fixed',
          right: '0px',
          bottom: '0px',
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '5px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 99
        }"
      >
        <van-button v-if="!readonly" @click="Add" slot="button" type="info"
          >添加产品</van-button
        >
        <van-button
          @click="close"
          style="margin-left: 8px"
          slot="button"
          type="default"
          >关闭</van-button
        >
        <van-button
          v-if="!readonly"
          @click="handleSubmit"
          style="margin-left: 8px"
          slot="button"
          type="primary"
          >保存</van-button
        >
      </div>
    </van-popup>
    <van-calendar
      :show-confirm="false"
      v-model="showDate"
      @confirm="onConfirm"
    />
    <Myuser @customerChoice="Client" ref="myuser" />
    <Product @Product="Product" ref="product" />
  </div>
</template>

<script>
import { Icon } from "vant";
import { Popup } from "vant";
import { AddressList } from "vant";

import {
  Row,
  Col,
  Cell,
  CellGroup,
  Stepper,
  Toast,
  Calendar,
  NavBar
} from "vant";
import { Field } from "vant";
//客户
import Myuser from "../../components/OwnUser.vue";
import Product from "../../components/Product.vue";
export default {
  components: {
    "van-stepper": Stepper,
    "van-calendar": Calendar,
    "van-nav-bar": NavBar,
    "van-icon": Icon,
    "van-popup": Popup,
    "van-row": Row,
    "van-address-list": AddressList,
    "van-field": Field,
    "van-col": Col,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    Myuser,
    Product
  },
  // props: {
  // readonly: {
  //   type: Boolean,
  //   default: false,
  // },
  // },

  data() {
    return {
      loading: false,
      finished: false,
      readonly: false,
      listClo: [],
      columns: [],
      showPicker: false,
      info: {},
      entity: {},
      data: [],
      show: false,
      showDate: false,
      Id: ""
    };
  },
  created() {
    if (this.$route.query.readonly == 0) {
      this.readonly = false;
    } else {
      this.readonly = true;
    }
    console.log(this.$route.query.readonly);
    this.openForm(this.$route.query.Id);
  },
  methods: {
    onLoad() {},
    delte(Id, index) {
      if (Id[0]) {
        this.http
          .post("/SampleManagement/SPL_SampleApplyDetails/DeleteData", Id)
          .then(resJson => {
            Toast("操作成功");
            this.getDataList();
          });
      } else {
        this.data.splice(index, 1);
        Toast("操作成功");
      }
    },
    onConfirmAddressee(item) {
      this.$set(this.entity, "Addressee", item.Addressee);
      this.$set(this.entity, "AddresseeTel", item.TelNumber);
      this.$set(this.entity, "ReceiveAddress", item.Address);
      // this.entity.Addressee = item.Name;
      // this.entity.AddresseeTel = item.Tel_Code;
      // this.entity.ReceiveAddress = item.Address;
      console.log(item);
      // this.entity.AddresseeTel = Row.Tel_Code;
      // var id = this.listClo.findIndex(item => item.Name == value);
      // console.log(id);
      // if (id != -1) {
      //   this.entity.AddresseeTel = this.listClo[id].Tel_Code;
      // }
      this.showPicker = false;
    },
    showPickerClick() {
      if (!this.readonly) {
        this.showPicker = true;
      }
    },
    swipeleft() {
      this.show = false;
    },
    touchstart(e) {
      // alert("123");

      // e.preventDefault();

      this.startX = e.touches[0].clientX;
      this.startY = e.touches[0].clientY;
    },
    touchmove(e) {
      //    this.show = false;
      // e.preventDefault();
      this.moveX = e.touches[0].clientX;
      this.moveY = e.touches[0].clientY;
      // this.startX - this.moveX <= 0
      //   ? console.log("你在往右滑")
      //   : console.log("你在往左滑");
    },

    formatDate(date) {
      var time = new Date(date);
      var y = time.getFullYear();

      return `${y}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm(date) {
      this.showDate = false;
      this.entity.ApplyDate = this.formatDate(date);
    },
    //返回
    onClickLeft() {
      this.$router.go(-1);
      this.show = false;
    },
    //选中的产品
    Product(a) {
      a.forEach(item => {
        this.data.push({
          ProductId: item.cInvCode,
          cInvName: item.cInvName,
          cInvCode: item.cInvCode,
          cInvStd: item.cInvStd
        });
      });
    },
    // 选择产品页面;
    Add() {
      this.$refs.product.openForm();
    },
    //关闭
    close() {
      this.show = false;
      this.$router.go(-1);
    },
    //本条客户的数据
    Client(a) {
      console.log(a);

      this.$set(this.entity, "Addressee", "");
      this.$set(this.entity, "AddresseeTel", "");
      this.$set(this.entity, "ReceiveAddress", "");

      this.$set(this.entity, "CustomerName", a.cCusName);

      this.entity.CustomerId = a.Id || a.cCusCode;
      this.contactPerson(a.Id);
    },
    contactPerson(id) {
      this.http
        .post(
          "/CustomerManagement/Cust_AddressBook/GetDataListByMoreCondition",
          {
            Search: [
              {
                Condition: "CustomerId",
                Keyword: id
              }
            ],
            ...this.filters
          }
        )
        .then(resJson => {
          this.columns = resJson.Data;
          this.listClo = resJson.Data;
          // if (this.columns && this.columns.length > 0) {
          //   this.columns = this.columns.map(item => {
          //     return item.Name;
          //   });
          // }
          console.log(this.columns);
        });
    },
    //选择客户
    CustomerChoice() {
      if (!this.Id) this.$refs.myuser.openForm();
    },
    getDataList() {
      this.http
        .post("/SampleManagement/SPL_SampleApplyMain/GetTheDataOfAll", {
          SortField: "Id",
          SortType: "desc",
          Search: {
            Condition: "Id",
            Keyword: this.Id
          }
        })
        .then(res => {
          console.log(res);
          if (res.Success) {
            this.entity = res.Data;

            this.data = res.Data.SSAD_List;
            this.$set(
              this.entity,
              "ApplyDate",
              this.entity.ApplyDate.substring(0, 10)
            );
            this.contactPerson(this.entity.CustomerId);
          } else {
            Toast(res.Msg);
          }
        });
    },
    init() {
      this.Id = "";
      this.show = true;
      (this.data = []), (this.entity = {});
    },
    op() {
      this.http.post("/Base_Manage/Home/GetOperatorInfo").then(resJson => {
        if (resJson.Success) {
          this.info = resJson.Data.UserInfo;
        } else {
          Toast(resJson.Msg);
        }
      });
    },
    handleSubmit() {
      if (!this.entity.CustomerName) {
        Toast("请选择客户");
        return;
      }
      if (!this.entity.ApplyDate) {
        Toast("请选择申请日期");
        return;
      }
      if (!this.entity.Addressee) {
        Toast("请选择收件人");
        return;
      }

      if (this.data.length <= 0) {
        Toast("样品不能为空");
        return;
      }

      this.$set(this.entity, "Transactor", this.info.Id);
      var entityData = { ...this.entity };
      var SSAD_List = [...this.data];
      entityData.SSAD_List = SSAD_List;

      this.http
        .post("/SampleManagement/SPL_SampleApplyMain/SaveData", entityData)
        .then(resJson => {
          console.log(resJson);

          if (resJson.Success) {
            Toast(resJson.Msg);
            this.show = false;

            console.log(this.$parent);
            this.$router.push("/service");
            // this.$parent.getDataList();
          } else {
            Toast(resJson.Msg);
          }
        });
    },
    openForm(Id) {
      this.init();
      this.op();
      if (Id) {
        this.Id = Id;
        this.getDataList();
      }
    }
  }
};
</script>

<style scoped>
.Fa {
  display: flex;
  justify-content: left;
}
.left {
  margin: 10px 0px 10px 15px;
}
.fontstepper {
  margin-left: 15px;
  line-height: 40px;
}
.font {
  margin-left: 15px;
  font-size: 18px;
}
.aa {
  text-align: right;
}
.scrollBar {
  height: 100%;
  padding-top: 266px;
  box-sizing: border-box;
  /* height: 550px; */
  /* height: calc(100vh - 266px); */
  /* padding-bottom: 80px; */
  padding-bottom: 55px;
  overflow-y: auto;
}
.close {
  position: "absolute";

  right: 0;
  bottom: 0;
  padding: "5px 16px";
  background: "#fff";
  text-align: right;
  z-index: 1;
}
.client {
  box-shadow: rgba(128, 128, 128, 0.1) 10px 10px 5px 5px;
}
.mysamplebox {
  width: 95%;

  margin: 0 auto;

  border: 1px solid #ccc;
  /* box-shadow: rgba(128, 128, 128, 0.1) 10px 10px 10px 10px; */

  margin-top: 20px;
  margin-bottom: 10px;
}
/* .Father {
  display: flex;
} */
</style>
